<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>京东top</title>
		<style type="text/css">
			*{margin:0;padding:0;font-family: "微软雅黑";}
			ul,li{list-style: none;}
			img{border:none;}
			a{text-decoration: none;color:#666;}
			#top{width:100%;height:32px;background:#eee;line-height: 32px;font-size: 14px;}
			.top-L{height:32px;float:left;width:100px;padding-left:40px;}
			.top-L-1{position: relative;}
			.top-L-1 span{padding-right:8px;}
			.top-L-1 em{font-style: normal;}
			.top-L-pos{position: absolute;left:0px;top:32px;width:250px;height:auto;overflow: hidden;display: none;}
			.top-L-pos ul{height:auto;overflow: hidden;}
			.top-L-pos ul li{width:50px;float:left;line-height: 26px;font-size: 12px;}
			.top-L-pos ul li a{padding:3px 5px;}			
			.top-L-pos ul li a:hover{color:#e00;}
			#top .top-L-pos .bg{background:#f00;color:#fff;}
			.top-R{height:32px;float:right;width:950px;}
			.top-R li{float:left;margin-right:10px;}
			.top-R li a{padding-right:10px;}
			.top-R li a:hover,.top-R .f-color{color:#e00;}
			.top-R-pos1{position: relative;}
			.top-R-pos101{position: absolute;left:-12px;top:32px;width:200px;height:auto;display: none;}
			.top-R-pos101 div{font-size:16px;padding-left:10px;}
			.top-R-pos101 ul{height:auto;overflow: hidden;}
			.top-R-pos101 ul li{line-height:26px;font-size: 12px;width:90px;padding-left: 10px;margin-right:0;}
			.top-R-pos3{position:relative;}
			.top-R-pos301{display:none;position: absolute;top:32px;left:-12px;padding-top:5px;width:95px;height:auto;text-align: center;font-size: 12px;line-height: 12px;}
			.top-R-pos301 span{display: block;}
			
		</style>
		<script src="js/jquery171.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#top .top-pos").hover(
					function(){
						$(this).css({background:"#fff"}).children("div").show();
					},function(){
						$(this).css({background:"#eee"}).children("div").hide();
				})
				$(".top-L-pos ul a:not(.bg)").hover(
					function(){
						$(this).css({background:"#ccc"}).parent().siblings().find('a:not(.bg)').css({background:"#fff"});
					},function(){
						$(this).css({background:"#fff"}).parent().siblings().find('a:not(.bg)').css({background:"#fff"})
					}
				)
			})
		</script>
	</head>
	<body>
		<div id="top">
			<ul class="top-L">
				<li class="top-L-1 top-pos"><span>送至：甘肃</span><em>∨</em>
					<div class="top-L-pos">
						<ul>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">黑龙江</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a class="bg" href="javascript:;">甘肃</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
							<li><a href="javascript:;">北京</a></li>
						</ul>
					</div>
				</li>
			</ul>
			<ul class="top-R">
				<li><a href="javascript:;" class="f-color">请登录</a></li>
				<li><a href="javascript:;">免费主粗</a>丨</li>
				<li><a href="javascript:;">我的订单</a>丨</li>
				<li class="top-R-pos1 top-pos"><a href="javascript:;">我的京东</a><span>∨</span>丨
					<div class="top-R-pos101">
						<div><a href="javascript:;">你好，请登录</a></div>
						<ul>
							<li><a href="javascript:;">我的京豆</a></li>
							<li><a href="javascript:;">我的京豆</a></li>
							<li><a href="javascript:;">我的京豆</a></li>
							<li><a href="javascript:;">我的京豆</a></li>
							<li><a href="javascript:;">我的京豆</a></li>
							<li><a href="javascript:;">我的京豆</a></li>
							<li><a href="javascript:;">我的京豆</a></li>
							<li><a href="javascript:;">我的京豆</a></li>
						</ul>
					</div>
				
				</li>
				<li><a href="javascript:;">激动会员</a>丨</li>
				<li><a href="javascript:;">企业采购</a>丨</li>
				<li class="top-R-pos2 top-pos"><a href="javascript:;">手机京东</a><span>∨</span>丨</li>
				<li class="top-R-pos3 top-pos"><a href="javascript:;">关注京东</a><span>∨</span>丨
					<div class="top-R-pos301">
						<img src="img/top1.jpg" />
						<span>关注京东微店</span>
					</div>
				</li>
				<li><a href="javascript:;">客户服务</a><span>∨</span>丨</li>
				<li><a href="javascript:;">网站导航</a><span>∨</span></li>
			</ul>
		</div>
	</body>
</html>
